<template>
  <div class="book">
    <div class="introduction-navigation">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/reservation' }">紫檀预定</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: `/roomIntroduction?id=${roomid}`}">客房介绍</el-breadcrumb-item>
        <el-breadcrumb-item>客房预定</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="xiangqing">
      <div class="img">
        <img :src="form.roomImage" alt="">
      </div>
      <div class="con">
        <h2>{{form.roomTitle}}</h2>
        <i>{{roomType}}</i>
        <span>{{roomRemark}}</span>
      </div>
    </div>
    <div class="subform">
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="入住时间">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="form.checkDay" v-model="form.checkDay" style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-date-picker placeholder="form.leaveDay" v-model="form.leaveDay" style="width: 100%;" @blur="upMoney(form)"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="入住人数" prop="people">
          <el-select v-model="form.peopleNum" :placeholder="form.people">
            <el-option label="一人" value="1"></el-option>
            <el-option label="二人" value="2"></el-option>
            <el-option label="三人" value="3"></el-option>
            <el-option label="四人" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="儿童人数" prop="people">
          <el-select v-model="form.childNum" :placeholder="form.child">
            <el-option label="一人" value="1"></el-option>
            <el-option label="二人" value="2"></el-option>
            <el-option label="三人" value="3"></el-option>
            <el-option label="四人" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="入住者信息">
          <el-input v-model="form.name" placeholder="请输入真实姓名" @blur="checkName"></el-input>
          <b class="isOk">{{isName}}</b>
        </el-form-item>
        <el-form-item label="证件类型">
          <el-select v-model="form.IDcardType" placeholder="身份证">
            <el-option label="身份证" value="1"></el-option>
            <el-option label="护照" value="2"></el-option>
            <el-option label="港澳台证件" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="证件号码">
          <el-input v-model="form.IDcard" placeholder="请填写您的证件号码" @blur="checkIdcard"></el-input>
          <b class="isOk">{{isIdcard}}</b>
        </el-form-item>
        <el-form-item label="手机">
          <el-input v-model="form.Phone" placeholder="请输入您的联系电话" @blur="checkPhone"></el-input>
          <b class="isOk">{{isPhone}}</b>
        </el-form-item>
        <el-form-item label="电子邮箱">
          <el-input v-model="form.Email" placeholder="请输入您的电子邮箱"></el-input>
        </el-form-item>
        <el-form-item label="接机/接站服务">
          <el-radio-group v-model="isServer" @change="serveBox">
            <el-radio label="是"></el-radio>
            <el-radio label="否"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="form.remark"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="onSubmit(form)">立即预订</el-button>
          <el-button type="danger" plain @click="add(form)">加入订房单</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="bookprice">
      <span>￥<b>{{form.money}}</b></span>
      <i v-if="!isUserName">登录享优惠</i>
      <i v-if="isUserName">紫檀家人专享</i>
    </div>
  </div>
</template>

<script>
import { upbook, getData } from '../../api/book'

export default {
  data () {
    return {
      form: {
        name: '',
        people: '',
        peopleNum: '',
        money: '',
        checkDay: '',
        leaveDay: '',
        IDcardType: '1',
        IDcard: '',
        Phone: '',
        Email: '',
        serve: 0,
        remark: '',
        child: '',
        roomTitle: '',
        roomImage: '',
        payId: '',
        roomId: ''
      },
      isServer: '否',
      roomType: '',
      roomRemark: '',
      user: {
      },
      isUserName: true,
      isName: '',
      isIdcard: '',
      isPhone: '',
      userName: '',
      price: '',
      roomid: ''
    }
  },
  created () {
    const data = JSON.parse(this.$route.query.fxdata)
    this.form.money = data.money
    this.form.checkDay = data.checkTime
    this.form.leaveDay = data.leaveTime
    this.roomid = data.roomId
    this.form.remark = data.remark
    this.form.payId = Math.floor(Math.random() * (9 + 1) * 1000000000000).toString()
    this.people = data.people
    switch (data.people) { // 入住人数
      case '1':
        this.form.people = '一人'
        this.form.peopleNum = 1
        break
      case '2':
        this.form.people = '二人'
        this.form.peopleNum = 2
        break
      case '3':
        this.form.peopleNum = 3
        this.form.people = '三人'
        break
      case '4':
        this.form.peopleNum = 4
        this.form.people = '四人'
        break
    }

    this.child = data.child
    switch (data.child) { // 儿童人数
      case '1':
        this.form.child = '一人'
        this.form.childNum = 1
        break
      case '2':
        this.form.child = '二人'
        this.form.childNum = 2
        break
      case '3':
        this.form.childNum = 3
        this.form.child = '三人'
        break
      case '4':
        this.form.childNum = 4
        this.form.child = '四人'
        break
    }

    // 请求房间数据
    getData(data.roomId).then(res => {
      const api = 'http://47.96.89.247:8080/qf_hotel'
      this.form.roomTitle = res.data.roomName
      this.roomType = res.data.roomType.typeName
      this.roomRemark = res.data.remark
      this.form.roomImage = api + res.data.image
      this.form.roomId = res.data.id
      this.price = res.data.discount
    }).catch(err => console.log(err))

    // 判断是否登录 -- 价格标签
    if (sessionStorage.getItem('userName') && sessionStorage.getItem('userPassword')) {
      this.isUserName = true
      this.userName = sessionStorage.getItem('userName')
    } else {
      this.isUserName = !this.isUserName
    }
  },
  methods: {
    serveBox (val) {
      // eslint-disable-next-line eqeqeq
      if (val == '是') {
        this.form.serve = 1
      } else {
        this.form.serve = 0
      }
    },
    // 日期选择之后重新计算金额
    upMoney (res) {
      const time = {}
      time.checkTime = new Date(res.checkDay).getTime()
      time.leaveTime = new Date(res.leaveDay).getTime()
      time.cha = time.leaveTime - time.checkTime
      time.z = Math.ceil(time.cha / 1000 / 3600 / 24)
      this.form.money = time.z * this.price

      var leavedate = new Date(time.leaveTime)
      var leaveY = leavedate.getFullYear() + '-'
      var leaveM = (leavedate.getMonth() + 1 < 10 ? '0' + (leavedate.getMonth() + 1) : leavedate.getMonth() + 1) + '-'
      var leaveD = leavedate.getDate() < 10 ? '0' + leavedate.getDate() : leavedate.getDate()
      this.form.leaveDay = leaveY + leaveM + leaveD

      var checkdate = new Date(time.checkTime)
      var checkY = checkdate.getFullYear() + '-'
      var checkM = (checkdate.getMonth() + 1 < 10 ? '0' + (checkdate.getMonth() + 1) : checkdate.getMonth() + 1) + '-'
      var checkD = checkdate.getDate() < 10 ? '0' + checkdate.getDate() : checkdate.getDate()
      this.form.checkDay = checkY + checkM + checkD

      this.reload()
    },
    reload () {
      this.isReloadData = false
      this.$nextTick(() => {
        this.isReloadData = true
      })
    },
    // 验证
    checkName () {
      if (this.form.name.length === 0) {
        this.isName = '姓名不能为空'
        return false
      } else {
        this.isName = ''
        return true
      }
    },
    checkIdcard () {
      if (this.form.IDcard.length === 0) {
        this.isIdcard = '证件号码不能为空'
        return false
      } else if (!/^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|31)|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}([0-9]|x|X)$/.exec(this.form.IDcard)) {
        this.isIdcard = '请输入正确的证件号码'
        return false
      } else {
        this.isIdcard = ''
        return true
      }
    },
    checkPhone () {
      if (this.form.Phone.length === 0) {
        this.isPhone = '手机号不能为空'
        return false
      } else if (!/^1[3456789]\d{9}$/.exec(this.form.Phone)) {
        this.isPhone = '请输入正确的手机号'
        return false
      } else {
        this.isPhone = ''
        return true
      }
    },
    add (res) { // 加入订单房
      this.user.checkTime = res.checkDay
      this.user.leaveTime = res.leaveDay
      this.subDate = this.user.leaveTime - this.user.checkTime
      this.user.child = parseInt(res.childNum)
      this.user.people = parseInt(res.peopleNum)
      this.user.remark = res.remark
      this.user.userName = res.name
      // const cardType = {}
      // cardType.id = parseInt(res.IDcardType)
      // this.user.cardType = cardType
      this.user.cardTypeId = parseInt(res.IDcardType)
      this.user.userIDcard = res.IDcard
      this.user.userEmail = res.Email
      this.user.userPhone = res.Phone
      this.user.roomTitle = res.roomTitle
      this.user.money = res.money
      this.user.serve = parseInt(res.serve)
      this.user.image = res.roomImage
      this.user.payId = res.payId
      this.user.loginUserName = this.userName
      // const room = {}
      // room.id = parseInt(res.roomId)
      // this.user.room = room
      this.user.roomId = parseInt(res.roomId)
      if (this.subDate !== 0 && this.checkName() && this.checkIdcard() && this.checkPhone()) {
        if (sessionStorage.getItem('userName')) {
          this.$router.push({ path: '/order' })
          upbook(this.user).then(res => {
            console.log(res)
            location.reload()
          }).catch(err => console.log(err))
        } else {
          // this.$store.commit('addToCart', this.user)
          this.$confirm('请登录之后再预定', '您还未登录', {
            confirmButtonText: '去登录',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$router.push('/loginregister')
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
        }
      } else {
        alert('请选择正确的入住信息')
      }
    },
    onSubmit (res) { // 立即预定
      this.user.checkTime = res.checkDay
      this.user.leaveTime = res.leaveDay
      this.subDate = this.user.leaveTime - this.user.checkTime
      this.user.child = parseInt(res.childNum)
      this.user.people = parseInt(res.peopleNum)
      this.user.remark = res.remark
      this.user.userName = res.name
      this.user.IDcardType = parseInt(res.IDcardType)
      this.user.userIDcard = res.IDcard
      this.user.userEmail = res.Email
      this.user.userPhone = res.Phone
      this.user.serve = parseInt(res.serve)
      this.user.roomTitle = res.roomTitle
      this.user.money = res.money
      this.user.payId = res.payId
      this.user.loginUserName = this.userName
      if (this.subDate !== 0 && this.checkName() && this.checkIdcard() && this.checkPhone()) {
        if (sessionStorage.getItem('userName')) {
          this.add(res)
          this.$router.push({
            name: 'pay',
            query: {
              res: JSON.stringify(this.user)
            }
          })
        } else {
          this.$router.push({
            name: 'pay',
            query: {
              res: JSON.stringify(this.user)
            }
          })
        }
      }
    }
  }
}
</script>

<style lang="scss">
// 备注栏高度
.el-textarea__inner{
  height: 100px;
  width: 600px;
}
 .book{
   width: 930px;
   margin: 10px auto;
   margin-top: 200px;
   position: relative;
   background: #fff;
   .introduction-navigation{
     padding: 20px;
   }
   .xiangqing{
     border-bottom: 10px solid #f4f4f4;
     .img{
       display: inline-block;
       vertical-align:top;
       margin: 0 30px 20px 20px;
       img{
         width: 180px;
         height: 180px;
       }
     }
     .con{
       width: 600px;
       display: inline-block;
       h2{
         height: 26px;
         margin-bottom: 10px;
         font-size: 24px;
       }
       i{
         height: 20px;
         margin-bottom: 10px;
         display: block;
         color: #888888;
         font-size: 14px;
       }
       span{
         display: block;
         line-height: 20px;
         width: 400px;
         font-size: 14px;
         display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
       }
     }
   }
   .subform{
     width: 434px;
     display: inline-block;
     margin-top: 10px;
     padding: 20px 30px;
     .el-form-item{
       .el-form-item__content{
         position: relative;
          b{
            color: red;
            position: absolute;
            top: 0;
            left: 170px;
          }
       }
     }
   }
   .bookprice{
     width: 115px;
     display: inline-block;
     position: absolute;
     margin-top: 20px;
     right: 30px;
     span{
       font-size: 20px;
       color: #fd6674;
       b{
         font-size: 36px;
       }
     }
     i{
       width: 114px;
       height: 26px;
       color: #fd6674;
       line-height: 26px;
       text-align: center;
       display: block;
       border: 1px solid #fd6674;
     }
   }
 }
</style>
